<template>
    <div class="chatPage flex">
        <!-- 左侧 -->
        <div class="friendVue">
            <!-- 筛选部分 -->
            <div class="selectVue">
                <div class="flex_between">
                    <el-select v-model="weChatId" placeholder="选择微信AI客服" style="width: 48%;">
                        <el-option v-for="item in options" :key="item.id" :label="item.name" :value="item.id">
                            <span style="color: #333; font-weight: normal;">{{ item.name }}</span>
                        </el-option>
                    </el-select>
                    <el-select v-model="replyType" placeholder="是否开启自动回复" style="width: 48%;" @change="replyChange" clearable>
                        <el-option
                            v-for="item in replyTypes"
                            :key="item.name"
                            :label="item.name"
                            :value="item.name">
                        </el-option>
                    </el-select>
                </div>
                <div class="flex_between margin10">
                    <el-input v-model="key" style="width: 48%;" placeholder="搜索关键字" prefix-icon="el-icon-search" :clearable="true" @input="searchFun"></el-input>
                    <el-select v-model="replyType" placeholder="选择分组" style="width: 48%;" @change="replyChange" clearable>
                        <el-option
                            v-for="item in replyTypes"
                            :key="item.name"
                            :label="item.name"
                            :value="item.name">
                        </el-option>
                    </el-select>
                    <!-- <div class="btn" @click="dialogTableVisible=true">管理自动回复</div> -->
                </div>
            </div>

            <div class="tabVue flex align_center">
                <div class="tab" :class="{active: current===1}" @click="changeCurrent(1)">私聊</div>
                <div class="tab" :class="{active: current===2}" @click="changeCurrent(2)">群聊</div>
                <div class="tab" :class="{active: current===3}" @click="changeCurrent(3)">新消息</div>
            </div>

            <!-- 好友列表 -->
            <div class="friendList relative" @scroll="handleScroll">
                <!-- 列表为空 -->
                <div class="flex_column align_center absolute_auto" v-if="isEmpty">
                    <img src="../../assets/empty.png" slot="empty" style="width: 313px; height: 172px;">
                    <div style="color: #8F959E; padding-top: 15px">当前列表是空哦~</div>
                </div>

                <!-- 好友列表 -->
                <template v-if="current===1">
                    <div class="item flex align_center" v-for="(item, index) in friendList" :key="index" @click="toChat(item)" :class="{active: currentChat.friendWechatId===item.friendWechatId}">
                        <img src="../../assets/weChat.png" style="width: 44px; height: 44px;">
                        <div style="width: 100%; height: 40px; display: flex; flex-direction: column; justify-content: space-between">
                            <div class="flex_between align_center" style="padding-left: 5px;">
                                <div class="name line-1 flex_1">{{item.friendWechatName}}</div>
                                <div class="time" style="padding-left: 20px;">{{item.createTime}}</div>
                            </div>

                            <div class="flex_between align_center" style="width: 100%;">
                                <div class="message line-1 flex_1" style="padding-left: 5px;">{{item.lastMessage}}</div>
                                <div class="state" :class="{active: item.automaticResponse}" @click.stop="handleStatus(item.automaticResponse, item.id)">
                                    <div class="dot dot_right" v-if="item.automaticResponse===1"></div>
                                    <div class="dot dot_left" v-else></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </template>

                <!-- 群列表 -->
                <template v-if="current===2">
                    <div class="item flex align_center" v-for="(item, index) in friendList" :key="index" @click="toChat(item)" :class="{active: currentChat.friendWechatId===item.friendWechatId}">
                        <img src="../../assets/weChat.png" style="width: 44px; height: 44px;">
                        <div style="width: 100%; height: 40px; display: flex; flex-direction: column; justify-content: space-between">
                            <div class="flex_between align_center" style="padding-left: 5px;">
                                <div class="name line-1 flex_1">{{item.friendWechatName}}</div>
                                <div class="time" style="padding-left: 20px;">{{item.createTime}}</div>
                            </div>

                            <div class="flex_between align_center" style="width: 100%;">
                                <div class="message line-1 flex_1" style="padding-left: 5px;">{{item.lastMessage}}</div>
                                <div class="state" :class="{active: item.automaticResponse}" @click.stop="handleStatus(item.automaticResponse, item.id)">
                                    <div class="dot dot_right" v-if="item.automaticResponse===1"></div>
                                    <div class="dot dot_left" v-else></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </template>

                <!-- 新消息 -->
                <template v-if="current===3">
                    <div class="item flex align_center" v-for="(item, index) in newList" :key="index" @click="toChat(item)" :class="{active: currentChat.friendWechatId===item.friendWechatId}">
                        <img src="../../assets/weChat.png" style="width: 44px; height: 44px;">
                        <div style="width: 100%; height: 40px; display: flex; flex-direction: column; justify-content: space-between">
                            <div class="flex_between align_center" style="padding-left: 5px;">
                                <div class="name line-1 flex_1">{{item.friendWechatName}}</div>
                                <div class="time" style="padding-left: 20px;">{{item.createTime}}</div>
                            </div>

                            <div class="flex_between align_center" style="width: 100%;">
                                <div class="message line-1 flex_1" style="padding-left: 5px;">{{item.lastMessage}}</div>
                                <div class="state" :class="{active: item.automaticResponse}" @click.stop="handleStatus(item.automaticResponse, item.id)">
                                    <div class="dot dot_right" v-if="item.automaticResponse===1"></div>
                                    <div class="dot dot_left" v-else></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </template>

                <div class="flex align_center" style="padding: 0 40px;" v-if="isLoading">
                    <el-divider></el-divider>
                    <span class="el-icon-loading" style="padding: 0 15px; font-size: 20px"></span>
                    <el-divider></el-divider>
                </div>
            </div>
        </div>

        <!-- 中部聊天区 -->
        <div class="chatVue flex_column relative">
            <img src="../../assets/chat.png" style="width: 132px; height: 100px;" class="absolute_auto" v-if="JSON.stringify(currentChat)=='{}'">
            <template v-else>
                <div class="title">与{{ currentChat.friendWechatName }}的聊天</div>
                <div class="content" ref="chatBody">
                    <div class="li" v-for="(o, i) in history" :key="i">
                        <!-- 发送者 -->
                        <template v-if="o.location===1">
                            <div class="location1">
                                <div class="left">
                                    <div class="name">{{o.receiveWechatName}}</div>
                                    <div class="messagevue">{{o.message}}</div>
                                </div> 
                                <img src="../../assets/AI.png" style="width: 50px; height: 50px;">
                            </div>
                        </template>

                        <template v-if="o.location===0">
                            <div class="location0 flex">
                                <img src="../../assets/AI.png" style="width: 50px; height: 50px;">
                                <div class="right">
                                    <div class="name">{{o.receiveWechatName}}</div>
                                    <div class="messagevue">{{o.message}}</div>
                                </div>
                            </div>
                        </template>
                    </div>
                </div>
                <div class="sendVue">
                    <textarea v-model="message" :placeholder="`发送给${currentChat.friendWechatName}`"></textarea>
                    <div class="botVue flex_between align_center">
                        <div class="relative" style="width: 32px; height: 32px; cursor: pointer;">
                            <input ref="clearRef" class="fileBtn" type="file" id="fileupload" accept="image/*" @change="fileChange($event)"/>
                            <img src="../../assets/file.png" title="发送图片" style="width: 32px; height: 32px; cursor: pointer;">
                        </div>
                        <img src="../../assets/send.png" style="width: 32px; height: 32px; cursor: pointer;" title="发送" @click="sendFun">
                    </div>
                </div>
            </template>
        </div>

        <!-- 右侧 -->
        <div class="rightVue">
            <div class="label">对方备注信息</div>
            <div class="inpVue">
                <div class="key">姓名</div>
                <el-input placeholder="姓名备注" style="width: 100%; margin-top: 8px"></el-input>
            </div>
            <div class="inpVue">
                <div class="key">手机</div>
                <el-input placeholder="手机备注" style="width: 100%; margin-top: 8px"></el-input>
            </div>
            <div class="inpVue">
                <div class="flex_between">
                    <div class="key">标签</div>
                    <span style="color: #0147fd; font-weight: 600; cursor: pointer;">添加标签</span>
                </div>
                <div class="inner"></div>
            </div>
            <div class="inpVue">
                <div class="flex_between">
                    <div class="key">分组</div>
                    <span style="color: #0147fd; font-weight: 600; cursor: pointer;">创建分组</span>
                </div>
                <el-select v-model="weChatId" placeholder="选择微信AI客服" style="width: 100%; margin-top: 8px;">
                    <el-option v-for="item in options" :key="item.id" :label="item.name" :value="item.id">
                        <span style="color: #333; font-weight: normal;">{{ item.name }}</span>
                    </el-option>
                </el-select>
            </div>
            <div class="inpVue">
                <div class="key">AI对话总结</div>
                <textarea></textarea>
            </div>
            <div class="inpVue">
                <div class="key">手动备注</div>
                <textarea placeholder="例如：这个客户很有潜力"></textarea>
            </div>
            <div class="btn">确定</div>
        </div>

        <!-- 管理自动回复 -->
        <el-dialog title="管理自动回复" :visible.sync="dialogTableVisible" :show-close="true" :center="true" top="10vh">
            <div class="dialogVue">
                <div class="headerVue flex_between align_center">
                    <div class="tabVue">
                        <div class="tab" :class="{active: replyCurrent===1}" @click="changeReplyCurrent(1)">批量开启</div>
                        <div class="tab" :class="{active: replyCurrent===2}" @click="changeReplyCurrent(2)">批量关闭</div>
                    </div>
                    <div class="flex">
                        <el-select v-model="datasetId" placeholder="选择分组" style="width: 180px;">
                            <el-option v-for="item in options" :key="item.id" :label="item.name" :value="item.id">
                                <span style="color: #000;">{{ item.name }}</span>
                            </el-option>
                        </el-select>
                        <el-select v-model="datasetId" placeholder="选择标签" style="width: 180px; margin-left: 10px;">
                            <el-option v-for="item in options" :key="item.id" :label="item.name" :value="item.id">
                                <span style="color: #000;">{{ item.name }}</span>
                            </el-option>
                        </el-select>
                    </div>
                </div>
                <div class="bodyVue margin20">
                    <div class="bodyInner flex flex_wrap">
                        <div class="ver" v-for="(ver, i) in 50" :key="i"></div>
                    </div>
                </div>
                <div class="paginationVue flex_between align_center">
                    <el-pagination background layout="prev, pager, next" :page-size="pageSize" :total="total" @current-change="handleCurrentChange"></el-pagination>
                    <div class="btn">确定</div>
                </div>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import { mapState } from "vuex"
import { post } from "@/common/request.js"
export default {
    data(){
        return {
            options: [],
            robotName: "",
            replyType: "",
            replyTypes: [{ name: '开启' }, { name: '关闭' }],
            key: "",
            keyWord: "",
            answer: "",
            current: 1,
            friendList: [],
            message: "",
            state: "",
            isEmpty: false,
            weChatId: "",
            isLastPage: false,
            isLoading: false,
            pageNum: 1,
            pageSize: 50,
            history: [],
            dialogTableVisible: false,
            replyCurrent: 1,
            total: 0,
            datasetId: "",
            historyPageNum: 1,
            historyPageSize: 30,
            isHistoryLastPage: false,
            newList: [], //新消息
        }
    },

    created(){
        this.friendList = []
        this.getWeChatList()
    },

    computed: {
        ...mapState({
            currentChat: state=> state.currentChat,
            user: state=> state.user,
            msg: state=> state.msg
        })
    },

    watch: {
        key(){
            if(!this.key) this.getFriendList()
        },
        msg(){
            console.log(this.msg)
            // this.newList.forEach(o=>{
            //     if(o.id.includes(this.msg) && this.weChatId===this.msg)
            // })
            this.newList.unshift(this.msg)
        }
    },

    methods: {
        clearFun(){
            console.log("clearFun")
        },
        clear(){
            console.log("clear")
            this.getFriendList()
        },
        replyChange(e){
            console.log(e)
            this.pageNum = 1
            this.getFriendList()
        },
        // 触底加载分页
        handleScroll(e){
            if(this.isLastPage || this.isLoading) return
            const { scrollTop, clientHeight, scrollHeight } = e.target
            if(scrollHeight - scrollTop - clientHeight === 0) {
                console.log("触底了")
                this.pageNum++
                this.isLoading = true
                this.getFriendList()
            }
        },
        // 发送消息
        sendFun(){
            post("/front/weChatMsg/sendTextMsg", {
                friendId: this.currentChat.id,
                friendWechatId: this.currentChat.friendWechatId,
                friendWechatName: this.currentChat.friendWechatName,
                friendWechatRemark: this.currentChat.friendWechatRemark,
                groupId: "",
                groupName: "",
                userWechatName: this.currentChat.userWechatName,
                userWechatId: this.currentChat.userWechatId,
                port: this.currentChat.port,
                message: this.message
            }).then(res=>{
                if(res.data.code===0) {
                    this.message = ""
                    this.getHistory()
                }
            })
        },

        // 选择文件
        fileChange(event){
            let file = event.target.files[0];
            let formData = new FormData()
            formData.append("file", file)
            post("/front/search/uploadImage", formData).then(res=>{
                post("/front/weChatMsg/sendImageMsg", {
                    friendId: this.currentChat.id,
                    friendWechatId: this.currentChat.friendWechatId,
                    friendWechatName: this.currentChat.friendWechatName,
                    friendWechatRemark: this.currentChat.friendWechatRemark,
                    groupId: "",
                    groupName: "",
                    userWechatName: this.currentChat.userWechatName,
                    userWechatId: this.currentChat.userWechatId,
                    port: this.currentChat.port,
                    message: res.data.obj
                }).then(result=>{
                    console.log(result)
                })
            })
        },

        // 去聊天
        toChat(item){
            this.$store.state.currentChat = item
            this.getHistory()
            
        },

        // 获取某个好友或者群聊的聊天记录
        getHistory(){
            this.$post("/front/weChatMsg/friendMessageList", {
                pageNum: this.historyPageNum,
                pageSize: this.historyPageSize,
                friendId: this.currentChat.id
            }).then(res=>{
                if(res.data.code===0) {
                    this.history = res.data.obj.list
                    this.isHistoryLastPage = res.data.obj.isLastPage
                    this.scrollToBottom()
                }
            })
        },

        // 滑动到聊天最底部
        scrollToBottom(){
            this.$nextTick(()=>{
                let dom = this.$refs.chatBody
                dom.scrollTo({ top: dom.scrollHeight, behavior: 'smooth' });
            })
        },

        // 私聊群聊切换
        changeCurrent(index){
            this.current = index
        },

        // 查询微信列表
        getWeChatList(){
            this.$post("/front/userWechat/wechatList").then(res=>{
                if(res.data.code===0) {
                    this.options = res.data.obj.list
                    if(this.options.length===0) return
                    this.weChatId = this.options[0].id
                    this.getFriendList()
                }
            })
        },


        changeReplyCurrent(index){
            this.replyCurrent = index
        },

        // 获取好友列表
        getFriendList(){
            this.$post("/front/wechat/friend/friendList", {
                pageNum: this.pageNum,
                pageSize: this.pageSize,
                userWechatPrimaryId: this.weChatId,
                automaticResponse: this.replyType ? (this.replyType==="开启" ? 1 : 0) : ""
            }).then(res=>{
                if(res.data.code===0) {
                    this.friendList = this.friendList.concat(res.data.obj.list)
                    this.isLastPage = res.data.obj.isLastPage
                    this.isEmpty = res.data.obj.list.length === 0
                    this.isLoading = false
                }else{
                    this.isLoading = false
                    this.isLastPage = false
                }
            })
        },

        // 搜索好友
        searchFun(){
            this.$post("/front/wechat/friend/searchFriendList", {
                userWechatPrimaryId: this.weChatId,
                content: this.key
            }).then(res=>{
                console.log(res)
                this.friendList = res.data.obj
            })
        },

        // 一键开启自动回复或关闭接口
        handleStatus(status, id){
            console.log(status)
            this.$post("/front/wechat/friend/modifyFriendAutomaticResponseType", {
                userWechatPrimaryId: this.weChatId,
                automaticResponse: status===1 ? 0 : 1,
                friendOrGroupId: id,
                type: 0,
            }).then(res=>{
                if(res.data.code===0) {
                    this.friendList.forEach(o=>{
                        if(o.id===id) o.automaticResponse = status===1 ? 0 : 1
                    })
                }
            })
        },

        handleCurrentChange(val) {
           
        },
    }
}
</script>


<style lang="less" scoped>
:deep(.el-icon-search:before) {
    color: #AAA !important;
}
:deep(.el-switch__core) {
    width: 28px !important;
    height: 15px;
}
:deep(.el-switch__core:after) {
    width: 11px;
    height: 11px;
}
:deep(.el-switch.is-checked .el-switch__core::after) {
    margin-left: -12px;
}
:deep(.el-dialog) {
    width: 800px;
    height: 80vh;
    border-radius: 10px;
}
:deep(.el-dialog__header) {
    padding: 10px 0 0;
}
:deep(.el-dialog__body) {
    padding: 0;
}
.dialogVue {
    width: 100%;
    .headerVue {
        width: 100%;
        height: 60px;
        padding: 20px 20px 0 20px;
        .tabVue {
            display: flex;
            .tab {
                width: 80px;
                height: 40px;
                background: #f5f5f5;
                border-radius: 5px;
                line-height: 40px;
                text-align: center;
                color: #333;
                margin-right: 10px;
                cursor: pointer;
            }
            .active {
                background: #0147fd;
                color: #fff;
            }
        }
    }
    .bodyVue {
        width: 100%;
        height: calc(80vh - 174px);
        padding: 0 20px;
        overflow: scroll;
        .bodyInner {
            width: 100%;
            .ver {
                width: 246px;
                height: 50px;
                border: 1px solid #f5f5f5;
                margin-bottom: 10px;
                margin-right: 10px;
            }
            .ver:nth-child(3n) {
                margin-right: 0;
            }
        }  
    }
    .bodyVue::-webkit-scrollbar {
        width: 0;
        height: 0;
    }
    .paginationVue {
        width: 100%;
        height: 60px;
        background: #fff;
        padding: 0 20px 0 10px;
        .btn {
            width: 100px;
            height: 40px;
            text-align: center;
            line-height: 40px;
            background: #0147fd;
            border-radius: 5px;
            color: #fff;
            cursor: pointer;
        }
    }
}
.chatPage {
    width: 100%;
    height: 100%;
    background: #f5f5f5;
    .friendVue {
        width: 380px;
        height: 100%;
        background: #fff;
        padding: 15px;
        .selectVue {
            width: 100%;
            .btn {
                width: 48%;
                height: 40px;
                line-height: 40px;
                text-align: center;
                border: 1px solid #DCDFE6;
                border-radius: 5px;
                color: #333;
                cursor: pointer;
            }
        }   
        .tabVue {
            width: 100%;
            height: 40px;
            margin-top: 10px;
            .tab {
                width: 80px;
                height: 32px;
                line-height: 32px;
                text-align: center;
                background: #f5f5f5;
                cursor: pointer;
            }
            .tab:nth-child(1) {
                border-radius: 5px 0 0 5px ;
            }
            .tab:nth-child(3) {
                border-radius: 0 5px 5px 0;
            }
            .active {
                background: #0147fd;
                color: #fff;
            }
        } 
        .friendList {
            width: 100%;
            margin-top: 10px;
            height: calc(100% - 140px);
            overflow: scroll;
            .emptyVue {
                width: 100%;
                height: 100%;
                .emptyIcon {
                    width: 280px;
                    height: 155px;
                    margin-bottom: 15px;
                }
                span {
                    color: #AAA;
                }
            }
            .item {
                width: 100%;
                height: 60px;
                border-bottom: 1px solid #f5f5f5;
                cursor: pointer;
                padding: 0 8px;
                .name {
                    width: 100%;
                    color: #111;
                    font-weight: 600;
                    font-size: 13px;
                }
                .message, .time {
                    color: #AAA;
                    font-size: 13px;
                }
                .state {
                    width: 26px;
                    height: 15px;
                    background: #AAA;
                    border-radius: 10px;
                    position: relative;
                    margin-left: 20px;
                    cursor: pointer;
                    .dot {
                        width: 11px;
                        height: 11px;
                        background: #fff;
                        border-radius: 50%;
                        position: absolute;
                    }
                    .dot_left {
                        left: 2px;
                        top: 2px;
                    }
                    .dot_right {
                        right: 2px;
                        top: 2px;
                    }
                }
                .active {
                    background: #0147fd;
                }
            }
            .item:hover {
                background: #ececec;
            }
            .active {
                background: #ececec;
            }
        }    
        .friendList::-webkit-scrollbar {
            width: 0;
            height: 0;
            background-color: transparent;
        }    
    } 

    .chatVue {
        flex: 1;
        height: 100%;
        background: #fff;
        margin: 0 15px;
        padding: 0 20px 20px;
        .title {
            width: 100%;
            height: 40px;
            line-height: 40px;
            text-align: center;
            font-weight: 600;
        }
        .content {
            width: 100%;
            flex: 1;
            overflow: scroll;
            .li {
                width: 100%;
                padding: 10px 0;
                .location1 {
                    display: flex;
                    justify-content: end;
                    .left {
                        padding-right: 10px;
                        display: flex;
                        justify-content: end;
                        align-items: end;
                        flex-direction: column;
                        max-width: 80%;
                        .name {
                            color: #333;
                            font-weight: 600;
                            font-size: 15px;
                        }
                        .messagevue {
                            background: #0147fd;
                            border-radius: 5px;
                            color: #fff;
                            line-height: 1.4;
                            padding: 10px;
                            margin-top: 10px;
                            word-break: break-all;
                            white-space: wrap;
                        }
                    }
                }
                .location0 {
                    .right {
                        padding-left: 10px;
                        max-width: 80%;
                        .name {
                            color: #333;
                            font-weight: 600;
                            font-size: 15px;
                        }
                        .messagevue {
                            background: #f5f5f5;
                            border-radius: 5px;
                            color: #333;
                            line-height: 1.4;
                            padding: 10px;
                            margin-top: 10px;
                            word-break: break-all;
                            white-space: wrap;
                        }
                    }
                }   
                
            }
        }
        .content::-webkit-scrollbar {
            width: 0;
            height: 0;
        }
        .sendVue {
            width: 100%;
            height: 150px;
            border: 1px solid #f5f5f5;
            border-radius: 8px;
            margin-top: 10px;
            .botVue {
                width: 100%;
                height: 60px;
                padding: 0 15px;
                .fileBtn {
                    width: 100%;
                    height: 100%;
                    position: absolute;
                    left: 0;
                    top: 0;
                    opacity: 0;
                    cursor: pointer;
                    z-index: 98;
                    border: none;
                    outline: none;
                }
            }
            textarea {
                width: 100%;
                height: 90px;
                display: block;
                box-sizing: border-box;
                resize: none;
                border-radius: 4px;
                font-family: PingFangSC, PingFang SC;
                padding: 10px;
                font-size: 14px;
            }
            ::-webkit-input-placeholder { /* WebKit browsers */
                color: #AAA;
                font-size: 14px;
                font-family: PingFangSC, PingFang SC;
            }
            :-moz-placeholder { /* Mozilla Firefox 4 to 18 */
                color: #AAA;
                font-size: 14px;
                font-family: PingFangSC, PingFang SC;
            }
            ::-moz-placeholder { /* Mozilla Firefox 19+ */
                color: #AAA;
                font-size: 14px;
                font-family: PingFangSC, PingFang SC;
            }
            :-ms-input-placeholder { /* Internet Explorer 10+ */
                color: #AAA;
                font-size: 14px;
                font-family: PingFangSC, PingFang SC;
            }
        }
    }

    .rightVue {
        width: 380px;
        height: 100%;
        background: #fff;
        padding: 20px;
        .label {
            font-size: 15px;
            font-weight: 600;
            color: #111;
        }
        .btn {
            width: 100%;
            height: 42px;
            text-align: center;
            line-height: 42px;
            background: #0147fd;
            border-radius: 5px;
            color: #fff;
            margin-top: 30px;
            cursor: pointer;
        }
        .inpVue {
            margin-top: 20px;
            .key {
                color: #333;
                font-size: 13px;
            }
            .inner {
                width: 100%;
                height: 60px;
                border-radius: 4px;
                border: 1px solid #DCDFE6;
                margin-top: 8px;
            }
            textarea {
                width: 100%;
                height: 60px;
                border: 1px solid #DCDFE6;
                border-radius: 4px;
                display: block;
                resize: none;
                padding: 5px;
                line-height: 1.4;
                color: #606266;
                font-size: inherit;
                font-family: PingFangSC, PingFang SC;
                margin-top: 8px;
            }

            ::-webkit-input-placeholder { /* WebKit browsers */
                color: #AAA;
                font-size: 13px;
                font-family: PingFangSC, PingFang SC;
            }
            :-moz-placeholder { /* Mozilla Firefox 4 to 18 */
                color: #AAA;
                font-size: 13px;
                font-family: PingFangSC, PingFang SC;
            }
            ::-moz-placeholder { /* Mozilla Firefox 19+ */
                color: #AAA;
                font-size: 13px;
                font-family: PingFangSC, PingFang SC;
            }
            :-ms-input-placeholder { /* Internet Explorer 10+ */
                color: #AAA;
                font-size: 13px;
                font-family: PingFangSC, PingFang SC;
            }
            textarea::-webkit-scrollbar {
                width: 0;
                height: 0;
            }
        }
    }
}
</style>